<template>
  <el-row class="el-row-main">
    <el-col :span="4">
      <router-link to="/Index/Home">
        <div class="grid-content bg-purple bg-purple-img"></div>
      </router-link>
    </el-col>
    <el-col :span="15" v-show="isShow">
      <div class="grid-content">
        <ul class="grid-ul clearfix">
          <!-- <li v-for="module in modules" :key="module.id" v-if="!module.parentId">
              <router-link to="module.url" active-class="cur">
                  <i class="iconfont iconfont-color" v-html="module.icon">{{module.icon}}</i>
                  {{module.i18nText}}
                </router-link>
            </li> -->
          <li v-for="route in restRoutes" :key="route.id" v-if="route.url!=''">
            <router-link :to="route.url" active-class="cur" @click.native="loadChildModule(route.id)">
              <i class="iconfont iconfont-color" v-html="route.icon">{{route.icon}}</i>
              {{route.i18nText}}
            </router-link>
          </li>
        </ul>
      </div>
    </el-col>
    <el-col :span="5">
      <div class="grid-content bg-purple-c">
        <el-row>
          <el-col :span="6">
            <div class="grid-content bg-purple-p">
              <el-button type="info primary-t" @click="_restRoutes(1)">
                <i class="el-icon-arrow-up"></i>
              </el-button>
              <el-button type="info primary-b" @click="_restRoutes(2)">
                <i class="el-icon-arrow-down"></i>
              </el-button>
            </div>
          </el-col>
          <el-col :span="18">
            <div class="grid-content">
              <div @mouseover="toggleShow()" @mouseout="toggleShow()" class="grid-content-name">
                {{userName}}
                <ul v-show="isMsg" class="grid-content-ul">
                  <li>用户信息</li>
                  <li>修改密码</li>
                  <li>前往商城</li>
                  <li @click="close">退出</li>
                </ul>
              </div>
            </div>
            <!-- <el-dropdown class="el-dropdown-w" @command="hanlderCommand">
                  <span class="el-dropdown-link el-dropdown-link-i">
                    {{userName}}<i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="user">用户信息</el-dropdown-item>
                    <el-dropdown-item command="password">修改密码</el-dropdown-item>
                    <el-dropdown-item command="shop">前往商城</el-dropdown-item>
                    <el-dropdown-item command="loginOut">退出</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown> -->
          </el-col>
        </el-row>
      </div>
    </el-col>
  </el-row>
</template>

<script>
  export default {
    data() {
      return {
        isMsg: false,
        isShow: true,
        isHide: false,
        restRoutes: [],
        Routes: [],
        userName: '',
      }
    },
    created() {
      this.userName = sessionStorage.getItem('userName');
    },
    mounted() {
      this.loadModules();
    },
    methods: {
      toggleShow() {
        this.isMsg = !this.isMsg;
      },
      _restRoutes(n) {

        this.restRoutes = [];

        let LEN = n * 7;

        if (LEN < 7) {
          this.restRoutes = this.Routes.slice(0, LEN);
        } else {
          this.restRoutes = this.Routes.slice(LEN - 7, LEN);
        }
      },
      loadModules() {
        this.axios.post(this.lib.config.host.system + '/system/module/getCurrentUserModules')
          .then(res => {
            //更新到状态中
            this.$store.commit('updateModules', res.data);
            //重新创建一个数组
            this.Routes = res.data.filter(item => {
              if (item.parentId == null) {
                if (item.url == null) {
                  console.log(item.code + ':' + item.url)
                  item.url = '';
                }
                return item;
              }
            })
            this._restRoutes(1);
            this.loadChildModule(this.Routes[0].id)
            // this.modules = res.data;
          })
          .catch(error => {
            console.log(error);
          })
      },
      loadChildModule(pid) {
        //修改侧边栏的菜单
        var modules = this.$store.state.modules;
        var leftModules = [];
        //递归获取子菜单
        for (var module of modules) {
          if (module.parentId == pid) {
            module.children = [];
            module = this.recChildMenu(module, modules)
            leftModules.push(module);
          }
        }
        this.$store.commit('updateLeftModules', leftModules);

      },
      recChildMenu(pmodule, modules) {
        for (var module of modules) {
          if (module.parentId == pmodule.id) {
            pmodule.children.push(module);
            this.recChildMenu(module, modules);
          }
        }
        return pmodule;
      },
      toggle() {
        this.isShow = true;
        this.isHide = false;
      },
      toggle1() {
        this.isShow = false;
        this.isHide = true;
      },
      // 退出登录
      close() {
        this.$confirm('是否退出登录?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.axios.post(this.lib.config.host.system + "/system/logout").then((res) => {
            this.$message({
              type: 'success',
              message: '退出登录成功!'
            });
            this.$store.commit('updateSecurityId', '');
            localStorage.removeItem('securityId');
            this.$router.push({
              name: 'login'
            });
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消退出登录'
          });
        });
      },
      // hanlderCommand(key) {
      //   switch (key) {
      //     case 'user':
      //       console.log('用户信息')
      //       break;
      //     case 'password':
      //       console.log('修改密码')
      //       break;
      //     case 'shop':
      //       console.log('前往商场')
      //       break;
      //     case 'loginOut':
      //       console.log('退出登录')
      //       this.axios.post(this.lib.config.host.system + "/system/logout").then((res) => {
      //         this.$store.commit('updateSecurityId', '');
      //         localStorage.removeItem('securityId');
      //         this.$router.push({
      //           name: 'login'
      //         });
      //       })
      //       break;
      //     default:
      //       break;
      //   }
      // }
    }
  }

</script>

<style scoped>
  .el-col {
    border-radius: 4px;
  }

  .grid-content {
    width: 100%;
    min-height: 70px;
    text-align: center;
    line-height: 70px;

  }

  .grid-content-name {
    width: 90%;
    min-height: 70px;
    color: #fff;
    text-align: left;
    padding-left: 44px;
    line-height: 70px;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: url(./../assets/img/user.png) no-repeat 0px 14px;
  }

  .grid-content-ul {
    position: absolute;
    top: 70px;
    left: 100px;
    width: 60%;
    min-height: 30px;
    z-index: 10;
    width: 60%;
  }

  .grid-content-ul li {
    width: 80%;
    height: 30px;
    cursor: pointer;
    text-align: center;
    color: #fff;
    background: #DA1F24;
    line-height: 30px;
    border-bottom: 1px solid #fff;
  }

  .grid-content-ul li:hover {
    background: #f55858;
  }

  .grid-content-ul li:last-child {
    border-bottom: 1px solid #DA1F24;
  }

  .grid-content-ul li:first-child {
    border-top: 1px solid #fff;
  }

  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }

  .bg-purple-img {
    background: url(./../assets/img/main_logo.png) no-repeat center center;
    background-size: 88% 68%;
  }

  .el-dropdown-w {
    width: 100%;
  }

  .bg-purple-p {
    position: relative;
  }

  .primary-b {
    position: absolute;
    left: 5px;
    top: 40px;
    padding: 5px 20px;
    margin-left: 0;
  }

  .primary-t {
    position: absolute;
    left: 5px;
    top: 8px;
    padding: 5px 20px;
  }

</style>
